<template>
  <div class="body">
    <van-popup v-model:show="show" closeable round :style="{height: '70%',width:'80%'  } " teleport="body" >
      <div class="pop">
        <van-nav-bar v-model="giftName" style="background-color: #f1f1f1; margin-top: 10%;"
         :title="giftName" />
        <div class="background">
          
          <!-- 选用的背景图片 -->
          <van-image
            width="80%"
            height="100%"
            :src='backgroundImage'
          />
        </div>
        <div class="audio" style="width:100%">
          <audio ref="audioPlayer" :src="audio" controls style="width:100%"></audio>
        </div>
      </div>
    </van-popup>
    <!-- 页面顶部 -->
    <div class="header">
      <van-nav-bar title="我送出的礼物" />
    </div>

    

    <!-- 顶部账户信息 -->
    <div class="top" style="margin-top:5%">
      <van-icon size="5vw" name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
      <div class="balance" style="margin-right:250px">我的账户</div>
      <!-- <button class="button">充值</button> -->
    </div>

    <!-- 礼物列表 -->
    <table class="table">
      <thead>
        <tr>
          <th>礼物名称</th>
          <th>播放次数</th>
          <th>有效期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tr>
        <td>{{giftName}}</td>
        <td>100次</td>
        <td>2022-12-31</td>
        <td class="actions">
          <button class="button-small" @click="showPopup">详情</button>
          <!-- <button class="button-small">续费</button> -->
        </td>
      </tr>
      <tr>
        <td>礼物2</td>
        <td>200次</td>
        <td>2023-01-31</td>
        <td class="actions">
          <button class="button-small" @click="showPopup">详情</button>
          <!-- <button class="button-small">续费</button> -->
        </td>
      </tr>
      <tr>
        <td>礼物3</td>
        <td>100次</td>
        <td>2022-12-01</td>
        <td class="actions">
          <button class="button-small" @click="showPopup">详情</button>
          <!-- <button class="button-small">续费</button> -->
        </td>
      </tr>
      <tr>
        <td>礼物4</td>
        <td>100次</td>
        <td>2022-10-31</td>
        <td class="actions">
          <button class="button-small" @click="showPopup">详情</button>
          <!-- <button class="button-small">续费</button> -->
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { ref } from 'vue';

  export default{
    setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
    
    computed: {
    ...mapState(
      ['giftName','backgroundImage','audio']
    )
  },

}
</script>
<style lang="less" scoped>
    .pop{
      width: 100%;
  height: 0%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
    }
    
    .body {
      display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #f1f1f1;
    padding: 0px;
    
    }
    .header {
      height: 70px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 50px;
      width: 100%;
    }
/* 通用样式 */
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      
    }
    
    /* 顶部区域样式 */
    .top {
      margin-top:15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #e0e0e0;
      padding: 10px;
      position: sticky;
      top: 0;
      width: 95%;
      z-index: 1;
      
    }
    .background {
    width: 100%;
    // height: 30%;
    background-size: cover;
    background-position: center;
    margin-bottom: 10%;
    // margin-top:25%;
    margin-left: 10%;
  }
  .audio {
    margin: 20px;
    margin-top:5%;
  }
    
    .balance {
      font-size: 4vw;
      width: 200px;
    }
    
    .button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    .button:hover {
      background-color: #3e8e41;
    }
    
    /* 表格样式 */
    .table {
      margin-top: 20px;
      border-collapse: collapse;
      width: 95%;

      
    }
    
    .table th, .table td {
      padding: 8px;
      text-align: left;
      border: 1px solid #ddd;
    }
    
    .table th {
      background-color: #f2f2f2;
    }
    
    .actions {
      display: flex;
      justify-content: space-between;
    }
    
    .button-small {
      padding: 4px 8px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    
    .button-small:hover {
      background-color: #3e8e41;
    }
</style> 


  